<template>
	<view class="record-option">	
		<view>身高</view>
		<input class="input" v-model="growthrecordData.height" placeholder="请输入身高" maxlength="10"/>
		<view>cm</view>		
	</view>
	<view class="record-option">
		<view>体重</view>
		<input class="input" v-model="growthrecordData.weight" placeholder="请输入体重" maxlength="10"/>
		<view>kg</view>
	</view>
	<view class="record-option">
		<view>日期</view>
		<picker mode="date" :value="growthrecordData.recordDate" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="uni-input">{{growthrecordData.recordDate}}</view>
		</picker>							
		<uni-icons type="right" size="24"></uni-icons>
	</view>
	<button type="default" class="save-btn" @click="handleSave">保存</button>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
const babyId = uni.getStorageSync('babyId');
// console.log(babyId)
const growthrecordData = ref({
	height: '',
	weight: '',
	babyId: '',
	recordDate: getDate({format: true}),
});

onMounted(() => {
    growthrecordData.value.babyId = babyId;
});

// 计算属性
const startDate = computed(() => getDate('start'));
const endDate = computed(() => getDate('end'));

function bindDateChange(e) {
	growthrecordData.value.recordDate = e.detail.value;
}

function getDate(type) {
	const now = new Date();
	let year = now.getFullYear();
	let month = now.getMonth() + 1;
	let day = now.getDate();

	if (type === 'start') {
		year -= 60;
	} else if (type === 'end') {
		year += 2;
	}

	month = month > 9 ? month : `0${month}`;
	day = day > 9 ? day : `0${day}`;

	return `${year}-${month}-${day}`;
}

const handleSave = async () => {
    uni.request({
        method: 'POST',
        url: 'http://localhost:9100/api/growthrecord/add',
        data: growthrecordData.value,
        header: {
            'bece_token': uni.getStorageSync('bece_token') 
        },
        success: (res) => {
            console.log(res.data);
    		if (res.data.code == 200) {
    			growthrecordData.value = {};
    			uni.showToast({
    				title: '保存成功',
    				duration: 2000
    			});
    			uni.switchTab({
    				url: '/pages/home/home'
    			});
    		} else {
    			uni.showToast({
    				title: res.data.msg,
    				duration: 2000
    			});
    		}
        }
    });
};
</script>


<style scoped>
page{
	padding: 0 40rpx;
}
.record-option{
	display: flex;
	justify-content: space-between;
	border-bottom: 4rpx solid #f2f2f2;
	height: 100rpx;
	align-items:center;
}
.save-btn{
	margin-top:760rpx;
	color:#fff !important;
	background-color: #666ee8 !important;
	border-radius:100rpx;
}
.input{
	flex: 0.3;
}
.distance{
	
}

</style>
